<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=v, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        /* border: 1px solid; */
        margin-left: 10px;
        width: 150px;
    }
    .ys {
        background: aqua;
    }
    button{
        margin:20px;
    }
    li {
        margin: 10px;
    }
</style>
<body>
    <div id="root">
        <button @click="upFn">上移</button>
        <button @click="downFn">下移</button>
        <ul>
            <li :class="{ys:select.includes(index)}" v-for="(item,index) in arr" @click="selFn(index)">{{item.address}}:{{item.uname}}
            </li>
        </ul>
    </div>
</body>
</html>
<script src="http://unpkg.zhimg.com/vue@2"></script>
    <script>
    const vm = new Vue({
     el: "#root",
     data: {
        select: [],
        selectIndex: [],
        arr: [
            {
                address: "蒙德",
                uname: "巴巴托斯"
            },
            {
                address: "璃月",
                uname: "摩拉克斯"
            },
            {
                address: "稻妻",
                uname: "巴尔泽布"
            },
            {
                address: "须弥",
                uname: "小吉祥草王"
            },
        ]
    },
     methods: {
        selFn(index) {
            if (this.select.includes(index)) {
                this.select.splice(this.select.indexOf(index), 1)
            } else {
                this.select.push(index)
            }       
        },
         //上移
        upFn() {
            let select = this.select.sort();
            let arr = this.arr;
            if (select[0] === 0) {
                alert('已经到顶部了')
                return
            }
            select.forEach((i, index) => {
                arr.splice(i, 1, ...arr.splice(i - 1, 1, arr[i]))
                select[index] = i - 1
            })
        },
        //下移
        downFn() {
            let select = this.select.sort((a, b) => {
                return b - a
            });
            console.log(select)
            let arr = this.arr;
            if (select[0] === this.arr.length - 1) {
                alert('到底部了')
                return
            }
            select.forEach((i, index) => {
                arr.splice(i, 1, ...arr.splice(i + 1, 1, arr[i]))
                select[index] = i + 1
            })
        }
     }
    })
    </script>